<template>
  <li @click="styleDialog = true">
    <img src="/static/assets/3d/b2.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>样式</span>
  </li>

  <li @click="infoDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b3.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>编辑</span>
  </li>

  <li @click="delDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b4.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>删除</span>
  </li>

  <li @click="imgDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b1.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>图片</span>
  </li>

  <li @click="videoDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b5.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>视频</span>
  </li>
  <teleport to="body">
    <el-dialog v-model="delDialog" width="500">
      <span>确认删除该要素？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delDialog = false">取消</el-button>
          <el-button type="primary" @click="deleteMark"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </teleport>

  <div class="pst">
    <autoDialog
      title="编辑详细"
      v-if="infoDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeInfo"
      :isAbsolute="true"
    >
      <div class="list">
        <span class="title">名称：</span>
        <darkInput
          v-model="markname"
          placeholder="请输入名称"
          style="flex: 1; border: 1px solid #b9eeff"
        />
      </div>
      <div class="list">
        <span class="title">描述：</span>
        <textarea name="" v-model="markmemo" id="area"></textarea>
      </div>
      <div>
        <el-button @click="closeInfo">取消</el-button>
        <el-button type="primary" @click="savemarkInfo">保存</el-button>
      </div>
    </autoDialog>

    <autoDialog
      title="修改样式"
      v-if="styleDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeStyle"
      :isAbsolute="true"
    >
      <div class="list">
        <span class="title">背景颜色：</span>
        <el-color-picker v-model="areacolor" />
        <span
          class="title"
          style="margin-left: 30px"
          v-if="toolChildrenId != 13 && toolChildrenId != 14 && toolChildrenId != 15"
          >边框颜色：</span
        >
        <el-color-picker
          v-model="areabordercolor"
          v-if="toolChildrenId != 13 && toolChildrenId != 14 && toolChildrenId != 15"
        />
      </div>
      <div class="list" v-if="toolChildrenId != 13 && toolChildrenId != 14 && toolChildrenId != 15">
        <span class="title">边框宽度：</span>
        <darkInput v-model="borderwidth" type="number" style="flex: 1; border: 1px solid #b9eeff" />
      </div>
      <br />
      <br />
      <div>
        <el-button @click="closeStyle">取消</el-button>
        <el-button type="primary" @click="saveStyle">保存</el-button>
      </div>
    </autoDialog>

    <autoDialog
      title="修改图片"
      v-if="imgDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeImg"
      :isAbsolute="true"
    >
      <template v-if="markInfo.markFiles.indexOf('png')">
        <el-upload
          class="upload-demo"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleChange"
          accept="image/*"
        >
          <el-icon><Plus /></el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </template>
      <template v-else>
        <div> 暂无数据 </div>
      </template>

      <br />
      <div>
        <el-button @click="closeImg">取消</el-button>
        <el-button type="primary" @click="saveImg">保存</el-button>
      </div>
    </autoDialog>

    <autoDialog
      title="修改视频"
      v-if="videoDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeVideo"
      :isAbsolute="true"
    >
      <template v-if="markInfo.markFiles.indexOf('video')">
        <el-upload
          class="upload-demo"
          :file-list="fileListVideo"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleChangeVideo"
          accept="video/*"
        >
          <el-icon><Plus /></el-icon>
          <template #file="{ file }">
            <div>
              <video :src="file.url" controls></video>
              <span class="el-upload-list__item-actions">
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemoveVideo(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </template>
      <template v-else>
        <div> 暂无数据 </div>
      </template>

      <br />
      <div>
        <el-button @click="closeVideo">取消</el-button>
        <el-button type="primary" @click="saveVideo">保存视频</el-button>
      </div>
    </autoDialog>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { deleteSysmMapMarkFile } from '../../../../api/sysmapmark'
import { addSysmMapMark, deleteSysmMapMark, saveysmMapMark } from '../../../../api/sysmapmark'

const props = defineProps(['markInfo','imgAndVideoArr'])
// const toolChildrenId = props.markInfo.entity.options.attr.toolChildrenId

const emits = defineEmits(['delEntity', 'updateData'])
let { entity } = props.markInfo
const markname = ref(props.markInfo.markName)
var { markMemo } = props.markInfo
const markmemo = ref(markMemo || '')
const fileListVideo = ref([])
const fileList = ref([])

let orginrgStyle = Object.assign({},props.markInfo.markStyle);
const pointStyle = props.markInfo.markStyle || {}
const toolChildrenId = ref(props.markInfo.entity.options.attr.toolChildrenId) //代表不同面具有不同的样式选择
const areacolor = ref(pointStyle.areacolor || '#ffa430')
const borderwidth = ref(pointStyle.borderwidth || 2)

const styleDialog = ref(false)
const areabordercolor = ref(pointStyle.areabordercolor || '#fff9e8')
const imgDialog = ref(false)
const delDialog = ref(false)
const videoDialog = ref(false)
watch(
  () => props.markInfo.markFiles,
  () => {
    fileListVideo.value = isLengthZero(props.markInfo.markFiles, 'video')
    fileList.value = isLengthZero(props.markInfo.markFiles, 'image')
  }
)

watch(
  () => [imgDialog.value, videoDialog.value],
  (newval) => {
    if (newval) {
      fileListVideo.value = isLengthZero(props.markInfo.markFiles, 'video')
      fileList.value = isLengthZero(props.markInfo.markFiles, 'image')
    }
  }
)
watch(
  () => areabordercolor.value,
  (newval) => {
    pointStyle.areabordercolor = newval
    map3d.changeNowMarkItem(props.markInfo.entity, { outlineColor: newval })
  }
)

watch(
  () => areacolor.value,
  (newval) => {
    pointStyle.areacolor = newval
    map3d.changeNowMarkItem(props.markInfo.entity, { color: newval })
  }
)
watch(
  () => borderwidth.value,
  (newval) => {
    pointStyle.borderwidth = newval
    map3d.changeNowMarkItem(props.markInfo.entity, {  outlineWidth: newval })
  }
)



function isVideoOrImageByExtension(fileType) {
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
  const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm']
  if (imageExtensions.includes(fileType)) {
    return 'image'
  } else if (videoExtensions.includes(fileType)) {
    return 'video'
  }
  return 'unknown'
}
function isLengthZero(e, type) {
  var arr = []
  var videoArr = []
  e.forEach((item, i) => {
    var ity = isVideoOrImageByExtension(item.fileType)
    if (ity === 'image') {
      arr.push({
        index: i,
        url: URL.createObjectURL(props.imgAndVideoArr[i]),
        fileID: item.id,
        type: 'other',
        name: item.filename,
        status: 'success'
      })
    }
    if (ity === 'video') {
      videoArr.push({
        index: i,
        fileID: item.id,
        url: URL.createObjectURL(props.imgAndVideoArr[i]),
        type: 'other',
        name: item.filename,
        status: 'success'
      })
    }
  })

  return type === 'image' ? arr : videoArr
}
const closeStyle = () => {
  areacolor.value = orginrgStyle.areacolor || Cesium.Color.fromCssColorString('#000')
  borderwidth.value = orginrgStyle.borderwidth || 2
  areabordercolor.value = orginrgStyle.areabordercolor
  styleDialog.value = false
}
//保存样式
const saveStyle = () => {
  let formData = new FormData()
  formData.append('id', props.markInfo.id);
  formData.append('markStyle',JSON.stringify(props.markInfo.markStyle))
  let option = props.markInfo.entity.toGeoJSON()
  formData.append('markName', markname.value)
  formData.append('markType', '面')
  formData.append('markExt', JSON.stringify(option))

  saveysmMapMark(formData).then((e) => {
    ElMessage({
      message: '编辑成功',
      type: 'success',
      plain: true
    })
    emits('updateData', entity)
    orginrgStyle =  Object.assign({}, pointStyle);
    props.markInfo.markStyle = pointStyle;
    console.log(props.markInfo);
    props.markInfo.markExt = JSON.stringify(props.markInfo.entity.toGeoJSON())
    styleDialog.value = false
  })
}

//关闭图片弹窗
const closeImg = () => {
  imgDialog.value = false
  fileList.value = isLengthZero(props.markInfo.markFiles, 'image')
}
///关闭图片弹窗
const closeVideo = () => {
  videoDialog.value = false
  fileListVideo.value = isLengthZero(props.markInfo.markFiles, 'video')
}
//打开编辑
const infoDialog = ref(false)
const closeInfo = () => {
  infoDialog.value = false
  markname.value = props.markInfo.markName
  markmemo.value = props.markInfo.markMemo
}
//删除标注
const deleteMark = () => {
  var data = {
    id: props.markInfo.id
  }
  deleteSysmMapMark(data).then((e) => {
    delDialog.value = !delDialog.value
    emits('delEntity')
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    console.log(fileList)
  })
}

//保存编辑
const savemarkInfo = () => {
  if (markname.value === '') {
    ElMessage({
      message: '请输入标注名称',
      type: 'warning',
      plain: true
    })
    return
  }
  let formData = new FormData()
  formData.append('id', props.markInfo.id)
  formData.append('markName', markname.value)
  if (markmemo.value) {
    formData.append('markMemo', markmemo.value)
  }
  saveysmMapMark(formData).then((e) => {
    ElMessage({
      message: '编辑成功',
      type: 'success',
      plain: true
    })
    props.markInfo.markName = markname.value
    props.markInfo.markMemo = markmemo.value
    infoDialog.value = false
  })
}

//添加图片
const handleChange = (e) => {
  fileList.value.push(e)
}
//保存图片
const saveImg = () => {
  let newFiles = fileList.value.filter((file) => file.status === 'ready')
  let formData = new FormData()
  formData.append('id', props.markInfo.id)
  for (const item of newFiles) {
    formData.append('files', item.raw)
  }
  saveysmMapMark(formData).then((e) => {
    ElMessage({
      message: '编辑成功',
      type: 'success',
      plain: true
    })
    emits('updateData', entity)
    imgDialog.value = false
  })
}

//删除图片
const handleRemove = (e, i) => {
  if (e.type && e.type === 'other') {
    deleteSysmMapMarkFile({ id: e.fileID }).then(() => {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      emits('updateData', entity)
      fileList.value = fileList.value.filter((item) => item.fileID !== e.fileID)
    })
    return
  }
  fileList.value = fileList.value.filter((item) => item.uid !== e.uid)
}

//保存视频
const saveVideo = () => {
  let newFiles = fileListVideo.value.filter((file) => file.status === 'ready')
  let formData = new FormData()
  formData.append('id', props.markInfo.id)
  for (const item of newFiles) {
    formData.append('files', item.raw)
  }
  saveysmMapMark(formData).then((e) => {
    ElMessage({
      message: '编辑成功',
      type: 'success',
      plain: true
    })
    emits('updateData', entity)
     videoDialog.value = false
  })
}
//添加视频
const handleChangeVideo = (e) => {
  fileListVideo.value.push(e)
}
//删除视频
const handleRemoveVideo = (e, index) => {
  if (e.type && e.type === 'other') {
    deleteSysmMapMarkFile({ id: e.fileID }).then(() => {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      emits('updateData', entity)
      fileListVideo.value = fileListVideo.value.filter((item) => item.fileID !== e.fileID)
    })
    return
  }

  fileListVideo.value = fileListVideo.value.filter((e) => e.uid !== d.uid)
}
</script>

<style lang="scss" scoped>
.pst {
  position: absolute;
  right: 0;
  top: 0;
}
li {
  display: flex;
  height: 40px;
  width: 40px;
  list-style: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #83dcf9;
  cursor: pointer;
}
.content {
  background-color: #fff;
  color: #000;
  div {
    width: 85px;
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-top: 10px;
    span {
      text-align: center;
    }
  }
}
.list {
  display: flex;
  margin-bottom: 15px;
  align-items: center;

  .title {
    display: inline-block;
    margin-right: 5px;
  }
  #area {
    flex: 1;
    min-height: 120px;
    background-color: rgba(0, 25, 51, 0.8);
    border-radius: 8px;
    border: 1px solid #0e9cff;
    color: #b9eeff;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #b9eeff;
    outline: none;
  }
}
</style>